import React, { PureComponent } from 'react'
import { TouchableOpacity, StyleSheet, View, Image, Text } from 'react-native'
import { screen, system } from '../../../../common'
type Props = {
    info: Object,
}
type State = {
}
class SeeMoreGroupPurchaseItem extends PureComponent<Props, State>{

    getEndTime() {
        //单位毫秒
        let time = parseFloat(this.props.info.endTime) - parseFloat(new Date().getTime())
        let hours = Math.floor(time / 3600000)
        let minutes = Math.floor((time % 3600000) / 60000)
        let seconds = Math.floor((time % 60000) / 1000)
        return hours + ':' + minutes + ':' + seconds
    }



    render() {
        return (
            <View>
                <View style={styles.container}>
                    {/*团长头像*/}
                    <Image source={this.props.info.ownerImage} style={styles.headPortraitStyle} />
                    {/*中间的昵称、所需人数和剩余时间*/}
                    <View style={styles.centerStyle}>
                        {/*昵称和所需人数*/}
                        <View style={styles.centerTopStyle}>
                            {/*昵称*/}
                            <Text style={styles.ownerNameStyle}>
                                {this.props.info.ownerName}
                            </Text>
                            {/*所需人数*/}
                            <Text style={styles.needPersonNumberStyle}>
                                还差{this.props.info.needMemberCount}人
                        </Text>
                        </View>
                        {/*剩余时间*/}
                        <Text style={styles.endTimeStyle}>
                            剩余{this.getEndTime()}
                        </Text>
                    </View>
                    <View flex={1} />
                    {/*按钮的样式*/}
                    <TouchableOpacity
                        style={styles.buttonStyle}
                        onPress={() => {

                        }}
                    >
                        <Text style={styles.buttonTextStyle}>
                            去拼单
                    </Text>
                    </TouchableOpacity>
                </View>
                <View style={{height:2,backgroundColor:'#C0C0C0'}}></View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        width: screen.width * 0.7,
        height: screen.height * 0.1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    headPortraitStyle: {
        //marginLeft:screen.width/50,
        height: screen.width / 8,
        width: screen.width / 8,
        borderRadius: 45,
        // backgroundColor: 'red',
        // borderWidth: 1,
        // borderColor: 'red'
    },
    centerStyle: {
        marginLeft:screen.width/45,
    },
    centerTopStyle: {
        flexDirection: 'row',
    },
    ownerNameStyle: {
        fontSize: 22,
        // fontWeight: 'bold',
        color:'black'
    },
    needPersonNumberStyle: {
        fontSize: 18,
        marginLeft:screen.width/65,
        alignSelf: 'flex-end',
    },
    endTimeStyle: {
        fontSize: 13,
    },
    buttonStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
        height:screen.height*0.04,
        width:screen.width/7,
        marginRight: screen.width/65,
        borderRadius:8,
    },
    buttonTextStyle: {
        fontSize: 20,
        color:'white',
    },

})
export default SeeMoreGroupPurchaseItem